import React, { useState } from "react";
import { useContext } from "react";


const themes ={
 light: {
  foreground:'#000000',
  background:'#eeeeee'
 },
 dark: {
  foreground:'#ffffff',
  background:'#222222'
 }
}

const Therement = React.createContext(themes.light)

function Banana(){
  

  const [theme,setObb]=useState(themes.dark)
  return(
    <Therement.Provider value={theme}>
      <button onClick={() =>{
        setObb(themes.light)
      }}>点我变色</button>
      <Orgin/>
    </Therement.Provider>
  )
}
function Orgin(props){
  return(
    <App/>
  )
}

function App(){
  const themems = useContext(Therement)
  return(
    <button style={{background:themems.background, color: themems.foreground}}>
      hello
    </button>
  )
}

export default Banana